<template>
  <view class="container">
    <view class="example">
      <uni-forms ref="form" :model="user" labelWidth="80px">
        <uni-forms-item label="姓名" name="nickName">
          <uni-easyinput v-model="user.nickName" placeholder="请输入姓名" />
        </uni-forms-item>
        <uni-forms-item label="手机号码" name="phonenumber" required>
          <uni-easyinput v-model="user.phonenumber" placeholder="请输入手机号码" />
        </uni-forms-item>
        <uni-forms-item label="邮箱" name="email" required>
          <uni-easyinput v-model="user.email" placeholder="请输入邮箱" />
        </uni-forms-item>
        <uni-forms-item label="性别" name="sex" required>
          <uni-data-checkbox v-model="user.sex" :localdata="sexs" />
        </uni-forms-item>
        <uni-forms-item label="年龄" name="age">
          <uni-easyinput v-model="user.age" type="number" placeholder="请输入年龄" />
        </uni-forms-item>
        <uni-forms-item label="学校名称" name="schoolName" required>
          <uni-easyinput v-model="user.schoolName" placeholder="请输入学校名称" />
        </uni-forms-item>
        <uni-forms-item label="专业名称" name="profession" required>
          <uni-easyinput v-model="user.profession" placeholder="请输入专业名称" />
        </uni-forms-item>
        <uni-forms-item label="学历" name="degree">
          <uni-data-select v-model="user.degree" :localdata="educationOptions" />
        </uni-forms-item>
        <uni-forms-item label="资格证书" name="qualification">
          <uni-easyinput v-model="user.qualification" placeholder="请输入资格证书" />
        </uni-forms-item>
        <uni-forms-item label="是否党员" name="isParty">
          <uni-data-checkbox v-model="user.isParty" :localdata="partyOptions" />
        </uni-forms-item>
        <uni-forms-item label="工作城市" name="workingCity">
          <view class="location-row">
            <!-- 省份选择器 -->
            <view class="location-item rounded-selector">
              <picker 
                mode="selector" 
                :range="provinceOptions" 
                @change="onProvinceChange" 
                :value="selectedProvinceIndex"
              >
                <view class="picker-item">
                  <text class="location-text">{{ provinceOptions[selectedProvinceIndex] === '全部' ? '选择省份' : provinceOptions[selectedProvinceIndex] }}</text>
                  <uni-icons type="bottom" size="12" color="#666" class="location-icon"></uni-icons>
                </view>
              </picker>
            </view>
            
            <!-- 城市选择器 -->
            <view class="location-item rounded-selector">
              <picker 
                mode="selector" 
                :range="cityOptions" 
                @change="onCityChange" 
                :value="selectedCityIndex"
                :disabled="!selectedProvince"
              >
                <view class="picker-item" :class="{'disabled': !selectedProvince}">
                  <text class="location-text">{{ cityOptions[selectedCityIndex] === '全部' ? '选择城市' : cityOptions[selectedCityIndex] }}</text>
                  <uni-icons type="bottom" size="12" color="#666" class="location-icon"></uni-icons>
                </view>
              </picker>
            </view>
            
            <!-- 区县选择器 -->
            <view class="location-item rounded-selector">
              <picker 
                mode="selector" 
                :range="districtOptions" 
                @change="onDistrictChange" 
                :value="selectedDistrictIndex"
                :disabled="!selectedCity"
              >
                <view class="picker-item" :class="{'disabled': !selectedCity}">
                  <text class="location-text">{{ districtOptions[selectedDistrictIndex] === '全部' ? '选择区域' : districtOptions[selectedDistrictIndex] }}</text>
                  <uni-icons type="bottom" size="12" color="#666" class="location-icon"></uni-icons>
                </view>
              </picker>
            </view>
          </view>
        </uni-forms-item>
      </uni-forms>
    </view>
    <view class="submit-btn-container">
      <button type="primary" @click="submit" class="submit-btn">提交</button>
    </view>
  </view>
</template>

<script>
  import { getRecruitUserDataDetail, updateRecruitUserData } from "@/api/recruitUserData/recruitUserData"
import { getDicts } from '@/api/dict/data'
import Area from '@/utils/area.js'

  export default {
    data() {
      return {
        user: {
          nickName: "",
          phonenumber: "",
          email: "",
          sex: "",
          age: "",
          schoolName: "",
          profession: "",
          degree: "",
          qualification: "",
          isParty: "",
          workingCity: "",
          provinceCode: "",
          provinceName: "",
          cityCode: "",
          cityName: "",
          districtCode: "",
          districtName: ""
        },
        // 地区选择相关数据
        selectedProvince: '', // 选中的省份
        selectedCity: '', // 选中的城市
        selectedDistrict: '', // 选中的区域
        provinceCode: '', // 省份编码
        cityCode: '', // 城市编码
        districtCode: '', // 区域编码
        // 地区数据
        areaData: [], // 完整的地区数据
        provinceList: [], // 省份列表
        cityList: [], // 城市列表
        districtList: [], // 区域列表
        // 选择器相关
        selectedProvinceIndex: 0,
        selectedCityIndex: 0,
        selectedDistrictIndex: 0,
        provinceOptions: ['全部'],
        cityOptions: ['全部'],
        districtOptions: ['全部'],
        sexs: [], // 将从字典加载
        educationOptions: [], // 将从字典加载
        // 字典类型
        sexDictType: 'sys_user_sex', // 性别字典类型
        educationDictType: 'recruit_degree', // 学历字典类型
        partyOptions: [{
          text: '否',
          value: 0
        }, {
          text: '是',
          value: 1
        }],
        rules: {
          nickName: {
            rules: [{
              required: true,
              errorMessage: '姓名不能为空'
            }]
          },
          phonenumber: {
            rules: [{
              required: true,
              errorMessage: '手机号码不能为空'
            }, {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              errorMessage: '请输入正确的手机号码'
            }]
          },
          email: {
            rules: [{
              required: true,
              errorMessage: '邮箱地址不能为空'
            }, {
              format: 'email',
              errorMessage: '请输入正确的邮箱地址'
            }]
          },
          schoolName: {
            rules: [{
              required: true,
              errorMessage: '学校名称不能为空'
            }]
          },
          profession: {
            rules: [{
              required: true,
              errorMessage: '专业名称不能为空'
            }]
          },
          age: {
            rules: [{
              validator: (rule, value, data, callback) => {
                if (value && (value < 18 || value > 60)) {
                  callback('年龄必须在18-60岁之间')
                }
                return true
              }
            }]
          }
        }
      }
    },
    onLoad() {
      // 加载字典数据和省份数据
      Promise.all([
        this.loadDictData(),
        this.initAreaData()
      ]).then(() => {
        // 字典和省份数据加载完成后再获取用户数据
        this.getUser()
      })
    },
    onReady() {
      this.$refs.form.setRules(this.rules)
    },
    methods: {
      // 加载字典数据
      loadDictData() {
        return new Promise((resolve, reject) => {
          Promise.all([
            getDicts(this.sexDictType),
            getDicts(this.educationDictType)
          ]).then(([sexRes, educationRes]) => {
            // 处理性别字典
            if (sexRes && sexRes.code === 200) {
              this.sexs = sexRes.data.map(item => ({
                text: item.dictLabel,
                value: item.dictValue
              }));
            }
            
            // 处理学历字典
            if (educationRes && educationRes.code === 200) {
              this.educationOptions = educationRes.data.map(item => ({
                text: item.dictLabel,
                value: item.dictValue
              }));
            }
            
            resolve();
          }).catch(error => {
            console.error('加载字典数据失败', error);
            uni.showToast({
              title: '加载字典数据失败',
              icon: 'none'
            });
            // 即使失败也resolve，以便继续执行
            resolve();
          });
        });
      },
      
      // 初始化地区数据
      initAreaData() {
        try {
          // 获取地区数据
          this.areaData = Area;
          
          // 初始化省份列表
          this.provinceList = this.areaData.map(province => ({
            code: province.value,
            name: province.label
          }));
          
          // 对省份列表进行重新排序，将云南、贵州、四川、重庆和广西放在前面
          const priorityProvinces = ['云南省', '贵州省', '四川省', '重庆市', '广西壮族自治区'];
          
          // 分离出优先省份和其他省份
          const priorityList = [];
          const otherList = [];
          
          this.provinceList.forEach(province => {
            if (priorityProvinces.includes(province.name)) {
              priorityList.push(province);
            } else {
              otherList.push(province);
            }
          });
          
          // 按照指定的顺序排序优先省份
          priorityList.sort((a, b) => {
            return priorityProvinces.indexOf(a.name) - priorityProvinces.indexOf(b.name);
          });
          
          // 合并优先省份和其他省份
          this.provinceList = [...priorityList, ...otherList];
          
          // 初始化省份选择器选项
          this.provinceOptions = ['全部'].concat(this.provinceList.map(item => item.name));
          
          // 重置城市和区域选择器
          this.cityOptions = ['全部'];
          this.districtOptions = ['全部'];
          
          return Promise.resolve();
        } catch (error) {
          console.error('初始化地区数据失败:', error);
          this.provinceList = [];
          this.provinceOptions = ['全部'];
          return Promise.resolve();
        }
      },
      
      // 加载省份数据 - 兼容旧的方法名
      loadProvinceData() {
        return this.initAreaData();
      },
      
      // 省份选择器变化
      onProvinceChange(e) {
        try {
          const index = e.detail.value;
          // 如果选择了第一项（全部），则视为清空选择
          if (index === 0) {
            this.selectedProvinceIndex = 0;
            this.selectedProvince = '全部';  // 设置为"全部"而不是空字符串
            this.provinceCode = '';
            this.user.provinceCode = '';
            this.user.provinceName = '全部';  // 设置为"全部"而不是空字符串
            this.selectedCity = '全部';  // 设置为"全部"而不是空字符串
            this.cityCode = '';
            this.user.cityCode = '';
            this.user.cityName = '全部';  // 设置为"全部"而不是空字符串
            this.selectedDistrict = '全部';  // 设置为"全部"而不是空字符串
            this.districtCode = '';
            this.user.districtCode = '';
            this.user.districtName = '全部';  // 设置为"全部"而不是空字符串
            this.selectedCityIndex = 0;
            this.selectedDistrictIndex = 0;
            this.cityOptions = ['全部'];
            this.districtOptions = ['全部'];
          } else {
            this.selectedProvinceIndex = index;
            // 添加安全检查，确保索引有效且省份对象存在
            if (index > 0 && index <= this.provinceList.length) {
              const province = this.provinceList[index - 1]; // 因为选项列表第一项是"全部"
              if (province) {
                this.selectedProvince = province.name;
                this.provinceCode = province.code;
                this.user.provinceCode = province.code;
                this.user.provinceName = province.name;
              } else {
                console.error('无效的省份对象，索引:', index - 1);
                // 设置为默认值，防止错误
                this.selectedProvince = '全部';
                this.provinceCode = '';
                this.user.provinceCode = '';
                this.user.provinceName = '全部';
              }
            } else {
              console.error('省份索引超出范围:', index);
              // 设置为默认值，防止错误
              this.selectedProvince = '全部';
              this.provinceCode = '';
              this.user.provinceCode = '';
              this.user.provinceName = '全部';
            }
            this.selectedCity = '';
            this.cityCode = '';
            this.user.cityCode = '';
            this.user.cityName = '';
            this.selectedDistrict = '';
            this.districtCode = '';
            this.user.districtCode = '';
            this.user.districtName = '';
            this.selectedCityIndex = 0;
            this.selectedDistrictIndex = 0;
            
            // 加载城市列表
            this.loadCityList();
          }
          
          // 更新工作城市显示
          this.updateWorkingCity();
        } catch (error) {
          console.error('省份选择器变化处理失败:', error);
        }
      },
      
      // 城市选择器变化
      onCityChange(e) {
        try {
          const index = e.detail.value;
          // 如果选择了第一项（全部），则视为清空选择
          if (index === 0) {
            this.selectedCityIndex = 0;
            this.selectedCity = '全部';  // 设置为"全部"而不是空字符串
            this.cityCode = '';
            this.user.cityCode = '';
            this.user.cityName = '全部';  // 设置为"全部"而不是空字符串
            this.selectedDistrict = '全部';  // 设置为"全部"而不是空字符串
            this.districtCode = '';
            this.user.districtCode = '';
            this.user.districtName = '全部';  // 设置为"全部"而不是空字符串
            this.selectedDistrictIndex = 0;
            this.districtOptions = ['全部'];
          } else {
            this.selectedCityIndex = index;
            // 添加安全检查，确保索引有效且城市对象存在
            if (index > 0 && index <= this.cityList.length) {
              const city = this.cityList[index - 1]; // 因为选项列表第一项是"全部"
              if (city) {
                this.selectedCity = city.name;
                this.cityCode = city.code;
                this.user.cityCode = city.code;
                this.user.cityName = city.name;
              } else {
                console.error('无效的城市对象，索引:', index - 1);
                // 设置为默认值，防止错误
                this.selectedCity = '全部';
                this.cityCode = '';
                this.user.cityCode = '';
                this.user.cityName = '全部';
              }
            } else {
              console.error('城市索引超出范围:', index);
              // 设置为默认值，防止错误
              this.selectedCity = '全部';
              this.cityCode = '';
              this.user.cityCode = '';
              this.user.cityName = '全部';
            }
            this.selectedDistrict = '';
            this.districtCode = '';
            this.user.districtCode = '';
            this.user.districtName = '';
            this.selectedDistrictIndex = 0;
            
            // 加载区域列表
            this.loadDistrictList();
          }
          
          // 更新工作城市显示
          this.updateWorkingCity();
        } catch (error) {
          console.error('城市选择器变化处理失败:', error);
        }
      },
      
      // 区域选择器变化
      onDistrictChange(e) {
        try {
          const index = e.detail.value;
          // 如果选择了第一项（全部），则视为清空选择
          if (index === 0) {
            this.selectedDistrictIndex = 0;
            this.selectedDistrict = '全部';  // 设置为"全部"而不是空字符串
            this.districtCode = '';
            this.user.districtCode = '';
            this.user.districtName = '全部';  // 设置为"全部"而不是空字符串
          } else {
            this.selectedDistrictIndex = index;
            // 添加安全检查，确保索引有效且区域对象存在
            if (index > 0 && index <= this.districtList.length) {
              const district = this.districtList[index - 1]; // 因为选项列表第一项是"全部"
              if (district) {
                this.selectedDistrict = district.name;
                this.districtCode = district.code;
                this.user.districtCode = district.code;
                this.user.districtName = district.name;
              } else {
                console.error('无效的区域对象，索引:', index - 1);
                // 设置为默认值，防止错误
                this.selectedDistrict = '全部';
                this.districtCode = '';
                this.user.districtCode = '';
                this.user.districtName = '全部';
              }
            } else {
              console.error('区域索引超出范围:', index);
              // 设置为默认值，防止错误
              this.selectedDistrict = '全部';
              this.districtCode = '';
              this.user.districtCode = '';
              this.user.districtName = '全部';
            }
          }
          
          // 更新工作城市显示
          this.updateWorkingCity();
        } catch (error) {
          console.error('区域选择器变化处理失败:', error);
        }
      },
      
      // 加载城市列表
      loadCityList() {
        try {
          // 从areaData中查找对应的省份
          const provinceData = this.areaData.find(p => p.value === this.provinceCode);
          if (provinceData && provinceData.children) {
            // 从省份数据中获取城市列表
            this.cityList = provinceData.children.map(city => ({
              code: city.value,
              name: city.label
            }));
            
            // 更新城市选择器选项
            this.cityOptions = ['全部'].concat(this.cityList.map(item => item.name));
          } else {
            this.cityList = [];
            this.cityOptions = ['全部'];
          }
          
          // 重置区域选择器
          this.districtOptions = ['全部'];
        } catch (error) {
          console.error('加载城市数据失败:', error);
          this.cityList = [];
          this.cityOptions = ['全部'];
        }
      },
      
      // 加载区域列表
      loadDistrictList() {
        try {
          // 从areaData中查找对应的省份
          const provinceData = this.areaData.find(p => p.value === this.provinceCode);
          if (provinceData && provinceData.children) {
            // 从省份数据中查找对应的城市
            const cityData = provinceData.children.find(c => c.value === this.cityCode);
            if (cityData && cityData.children) {
              // 从城市数据中获取区域列表
              this.districtList = cityData.children.map(district => ({
                code: district.value,
                name: district.label
              }));
              
              // 更新区域选择器选项
              this.districtOptions = ['全部'].concat(this.districtList.map(item => item.name));
              return;
            }
          }
          this.districtList = [];
          this.districtOptions = ['全部'];
        } catch (error) {
          console.error('加载区域数据失败:', error);
          this.districtList = [];
          this.districtOptions = ['全部'];
        }
      },
      
      // 更新工作城市字段
      updateWorkingCity() {
        const parts = []
        
        // 只有当省份名称存在且不是"全部"时才添加
        if (this.user.provinceName && this.user.provinceName !== '全部') {
          parts.push(this.user.provinceName)
          
          // 只有当城市名称存在且不是"全部"时才添加
          if (this.user.cityName && this.user.cityName !== '全部') {
            parts.push(this.user.cityName)
            
            // 只有当区域名称存在且不是"全部"时才添加
            if (this.user.districtName && this.user.districtName !== '全部') {
              parts.push(this.user.districtName)
            }
          }
        }
        
        // 更新工作城市字符串
        this.user.workingCity = parts.join(',')
        console.log('更新工作城市:', this.user.workingCity)
      },
      
      getUser() {
        getRecruitUserDataDetail().then(response => {
          this.user = response
          
          // 确保学历字段是字符串类型
          if (response.degree !== undefined && response.degree !== null) {
            this.user.degree = String(response.degree)
          }
          
          // 解析工作城市字符串（如果存在）
          if (response.workingCity) {
            const cityParts = response.workingCity.split(',')
            if (cityParts.length >= 1) response.provinceName = cityParts[0]
            if (cityParts.length >= 2) response.cityName = cityParts[1]
            if (cityParts.length >= 3) response.districtName = cityParts[2]
          }
          
          // 如果有省份信息，初始化省份选择器
          if (response.provinceCode) {
            this.provinceCode = response.provinceCode;
            
            // 找到省份在选项中的索引
            const provinceIndex = this.provinceOptions.findIndex(name => {
              const province = this.provinceList.find(p => p.code === response.provinceCode);
              return name === (province ? province.name : null);
            });
            
            if (provinceIndex > 0) {
              this.selectedProvinceIndex = provinceIndex;
              this.selectedProvince = this.provinceOptions[provinceIndex];
              
              // 加载城市数据
              this.loadCityList();
              
              // 如果有城市信息，初始化城市选择器
              if (response.cityCode) {
                this.cityCode = response.cityCode;
                
                // 找到城市在选项中的索引
                const cityIndex = this.cityOptions.findIndex(name => {
                  const city = this.cityList.find(c => c.code === response.cityCode);
                  return name === (city ? city.name : null);
                });
                
                if (cityIndex > 0) {
                  this.selectedCityIndex = cityIndex;
                  this.selectedCity = this.cityOptions[cityIndex];
                  
                  // 加载区县数据
                  this.loadDistrictList();
                  
                  // 如果有区县信息，初始化区县选择器
                  if (response.districtCode) {
                    this.districtCode = response.districtCode;
                    
                    // 找到区县在选项中的索引
                    const districtIndex = this.districtOptions.findIndex(name => {
                      const district = this.districtList.find(d => d.code === response.districtCode);
                      return name === (district ? district.name : null);
                    });
                    
                    if (districtIndex > 0) {
                      this.selectedDistrictIndex = districtIndex;
                      this.selectedDistrict = this.districtOptions[districtIndex];
                    }
                  }
                }
              }
            }
          } 
          // 如果没有省份代码但有省份名称，通过名称匹配找到对应的省份代码
          else if (response.provinceName) {
            try {
              const matchedProvince = this.provinceList.find(p => p.name === response.provinceName);
              if (matchedProvince) {
                response.provinceCode = matchedProvince.code;
                this.provinceCode = matchedProvince.code;
                
                // 找到省份在选项中的索引
                const provinceIndex = this.provinceOptions.indexOf(matchedProvince.name);
                if (provinceIndex > 0) {
                  this.selectedProvinceIndex = provinceIndex;
                  this.selectedProvince = matchedProvince.name;
                  
                  // 加载城市数据
                  this.loadCityList();
                  
                  // 如果有城市名称，通过名称匹配找到对应的城市代码
                  if (response.cityName) {
                    const matchedCity = this.cityList.find(c => c.name === response.cityName);
                    if (matchedCity) {
                      response.cityCode = matchedCity.code;
                      this.cityCode = matchedCity.code;
                      
                      // 找到城市在选项中的索引
                      const cityIndex = this.cityOptions.indexOf(matchedCity.name);
                      if (cityIndex > 0) {
                        this.selectedCityIndex = cityIndex;
                        this.selectedCity = matchedCity.name;
                        
                        // 加载区县数据
                        this.loadDistrictList();
                        
                        // 如果有区县名称，通过名称匹配找到对应的区县代码
                        if (response.districtName) {
                          const matchedDistrict = this.districtList.find(d => d.name === response.districtName);
                          if (matchedDistrict) {
                            response.districtCode = matchedDistrict.code;
                            this.districtCode = matchedDistrict.code;
                            
                            // 找到区县在选项中的索引
                            const districtIndex = this.districtOptions.indexOf(matchedDistrict.name);
                            if (districtIndex > 0) {
                              this.selectedDistrictIndex = districtIndex;
                              this.selectedDistrict = matchedDistrict.name;
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            } catch (error) {
              console.error('根据名称匹配地区数据失败', error)
            }
          }
        })
      },
      
      submit(ref) {
        this.$refs.form.validate().then(res => {
          // 提交前确保工作城市已正确设置
          this.updateWorkingCity()
          
          console.log('提交数据:', this.user)
          updateRecruitUserData(this.user).then(response => {
            this.$store.commit('SET_NICK_NAME', this.user.nickName)
            this.$modal.msgSuccess("修改成功")
            setTimeout(() => {
              uni.navigateBack()
            }, 1500)
          })
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #ffffff;
  }

  .example {
    padding: 15px;
    background-color: #fff;
    padding-bottom: calc(80rpx + 40rpx + env(safe-area-inset-bottom)); /* 为底部按钮留出空间 */
  }

  .segmented-control {
    margin-bottom: 15px;
  }

  .button-group {
    margin-top: 15px;
    display: flex;
    justify-content: space-around;
  }

  .form-item {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .button {
    display: flex;
    align-items: center;
    height: 35px;
    line-height: 35px;
    margin-left: 10px;
  }

  :deep(.uni-forms-item__label) {
    font-weight: 500;
  }

  :deep(.uni-easyinput__content) {
    min-height: 35px;
  }

  :deep(.uni-data-select) {
    width: 100%;
  }
  
  /* 地区选择行样式 */
  .location-row {
    display: flex;
    justify-content: space-between;
    margin-top: 4rpx;
    padding: 0 6rpx;
  }
  
  .location-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f7fa;
    height: 64rpx;
    border-radius: 8rpx;
    margin: 0 6rpx;
    padding: 0 8rpx;
    position: relative;
    overflow: visible;
    z-index: 10;
  }
  
  .rounded-selector {
    background-color: #f6f7fb;
    border-radius: 30rpx;
    height: 64rpx;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
    padding: 0 15rpx;
  }
  
  .location-item:first-child {
    margin-left: 0;
  }
  
  .location-item:last-child {
    margin-right: 0;
  }
  
  .location-text {
    font-size: 24rpx;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 85%;
    display: block;
    text-align: center;
    padding-right: 20rpx;
  }
  
  .location-icon {
    position: absolute;
    right: 16rpx;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .picker-item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10rpx;
    box-sizing: border-box;
    white-space: nowrap;
  }
  
  .picker-item.disabled {
    opacity: 0.6;
  }
  
  /* 底部提交按钮样式 */
  .submit-btn-container {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    padding: 20rpx 30rpx;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    z-index: 99;
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  }
  
  .submit-btn {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 32rpx;
  }
</style>